<template>
  <section class="HLSPlay-component" style="width: 70%;">
    <el-divider></el-divider>
<!--    <el-button @click="enterPictureInPicture">hit</el-button>-->
    <video-player
        class="video-player-box"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied($event)"
    >
    </video-player>
  </section>

</template>
<script>
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
// import videoPlayer from '@videojs-player/vue'

export default {
  name:'HLSPlay',
  props: {
    src: {
      type: String
    },
    cover_url: {
      type: String
    }
  },
  components: {
    videoPlayer
  },
  data() {
    return {
      ispip: false,
      // [配置信息](https://blog.csdn.net/qq_39905409/article/details/98481735)
      playerOptions: {
        // videojs options
        autoplay: false,
        muted: false,
        preload: 'auto',
        language: 'zh-CN',
        fluid: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            // type: 'video/mp4',
            type: 'application/x-mpegURL',
            src: this.src, // 路径
            // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
          }
        ],
        // poster: 'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF',
        poster: this.cover_url, // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          progressControl: true // 进度条
        }
      }
    }
  },
  mounted() {

      // 这里可以安全地访问 this.player
    console.log('this is current player instance object', this.player);
      // 执行其他依赖于 player 实例的操作

  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    enterPictureInPicture() {
      const player = this.$refs.videoPlayer.player;
      this.ispip = !this.ispip
      if (player && document.pictureInPictureEnabled && this.ispip) {
        player.requestPictureInPicture().then(() => {
          console.log('已进入画中画模式');
        }).catch((error) => {
          console.error('进入画中画模式失败', error);
        });
      }else {
        this.exitPictureInPicture()
      }
    },
    exitPictureInPicture() {
      if (document.exitPictureInPicture) {
        document.exitPictureInPicture().then(() => {
          console.log('已退出画中画模式，回到正常播放模式');
        }).catch((error) => {
          console.error('退出画中画模式失败', error);
        });
      }
    },
    setSrc(src) {
      // 重新设置播放地址
      this.playerOptions['sources'][0]['src'] = src;
      setTimeout(()=>{
        this.$refs.videoPlayer.player.play() // 播放
      }, 1000)
    },
    play() {
      // 手动触发播放
      this.$refs.videoPlayer.player.play() // 播放
    },
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      console.log('player onPlayerEnded!', player)
    },
    onPlayerWaiting(player) {
      console.log('player onPlayerWaiting!', player)
    },
    onPlayerPlaying(player) {
      console.log('player onPlayerPlaying!', player)
    },
    onPlayerLoadeddata(player) {
      console.log('player onPlayerLoadeddata!', player)
    },
    onPlayerTimeupdate(player) {
      console.log('player onPlayerTimeupdate!', player)
    },
    onPlayerCanplay(player) {
      console.log('player onPlayerCanplay!', player)
    },
    onPlayerCanplaythrough(player) {
      console.log('player onPlayerCanplaythrough!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/ .video-player {
  // 设置 fluid: true，宽高自适应
  // 默认  1024 * 576
  // .vjs_video_3-dimensions {
  //   width: 50%;
  //
  // }

.HLSPlay-component{
  width: 800px;
}

  // 初始化，暂停按钮居中
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

